<template>
   <view class="wrap">
        <view class="info" v-for="(item,idx) in userArr" :key="idx" @tap="changeUrl(item.familyName, item.nameType, item.sex)">
            <van-cell-group inset="true">
                <van-cell size="large" is-link center>
                   <view class="userWrap">
                        <view class="surname">{{ item.familyName }}</view>
                        <view class="userInfo">
                            <view> {{item.sex == 1 ? '男' : ' 女'}}·{{ item.nameType == 0 ? '单字名':'双字名' }}</view>
                            <view>{{ item.birthday == null || item.birthday == undefined ? '暂无信息': item.birthday }}
                            </view>
                        </view>
                   </view>
                </van-cell>
            </van-cell-group>
        </view>
   </view>
</template>
<script>
import {  getRecordListAPI } from '../../../utils/api';
export default {
   data() {
     return {
       userArr:[]
     }
   },
   async onLoad(options){
        const userInfo = uni.getStorageSync('userInfo')
        const res = await getRecordListAPI(userInfo.id);
        const arr = res.result?.records?.map(vls => {
            console.log('vls.lunarBirthday',vls.lunarBirthday)
            vls.lunarBirthday = vls.lunarBirthday != null ? vls.lunarBirthday.substring(5,10):'';
            return vls
        })
        this.userArr = res.result?.records;
   },
   methods: {
    changeUrl(familyName,nameType,sex){
        uni.navigateTo({
            url:`../../../subPackagesA/pages/nameList/nameList?familyName=${familyName}&nameType=${nameType}&sex=${sex}`
        })
    }
   }
};
</script>
<style lang='less' scoped>
.wrap{
    // height: 100%;
    background-color: #F5F5F7;
    background-size: cover;
    padding-bottom: 30rpx;
    .info{
        padding-top: 30rpx;
        .userWrap{
            display: flex;
            align-items: center;
            .surname{
                width: 88rpx;
                height: 88rpx;
                line-height: 88rpx;
                text-align: center;
                border-radius: 50%;
                background: #FFF2E8;
                font-size: 48rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FF7F22;
            }
            .userInfo{
                margin-left: 30rpx;
                :first-child{
                    text-align: left;
                    font-size: 32rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #222229;
                }
                :nth-child(2){
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #222229;
                }
            }
        }
    }
}
</style>